class Settings {
    constructor(root) {
        this.root = root
        this.platform = 'WEB'
        if (root.ACWingOS) {
            this.platform = "ACAPP"
        }

        this.username = ''
        this.photo = ''

        this.$settings = $(`
            <div class="settings">  
                <div class="ac_game_settings_login">
                    <div class="ac_game_settings_title">
                        登陆
                    </div>
                    <div class="ac_game_settings_username">
                        <div class="ac_game_settings_item">
                            <input type="text" placeholder="用户名">
                        </div>
                    </div>
                    <div class="ac_game_settings_password">
                        <div class="ac_game_settings_item">
                            <input type="password" placeholder="密码">
                        </div>
                    </div>
                    <div class="ac_game_settings_submit">
                        <div class="ac_game_settings_item">
                            <button>登陆</button>
                        </div>
                    </div>
                    <div class="ac_game_settings_error_message">
<!--                        用户名或密码错误-->
                    </div>
                    <div class="ac_game_settings_option">
                        <a>注册</a>
                    </div>
                    <br>
                    <div class="ac_game_settings_acwing">
                        <img width='30' src="../../resources/acwing.png" alt="">
                        <div>
                            AcWing一键登录
                        </div>
                    </div>
                </div>
                <div class="ac_game_settings_register">
                    <div class="ac_game_settings_title">
                        注册
                    </div>
                    <div class="ac_game_settings_username">
                        <div class="ac_game_settings_item">
                            <input type="text" placeholder="用户名">
                        </div>
                    </div>
                    <div class="ac_game_settings_password ac_game_settings_password_first_input">
                        <div class="ac_game_settings_item">
                            <input type="password" placeholder="密码">
                        </div>
                    </div>
                    <div class="ac_game_settings_password ac_game_settings_password_second_confirm">
                        <div class="ac_game_settings_item">
                            <input type="password" placeholder="确认密码">
                        </div>
                    </div>
                    <div class="ac_game_settings_submit">
                        <div class="ac_game_settings_item">
                            <button>注册</button>
                        </div>
                    </div>
                    <div class="ac_game_settings_error_message">
<!--                        用户名或密码错误-->
                    </div>
                    <div class="ac_game_settings_option">
                        <a>登陆</a>
                    </div>
                    <br>  
                    <div class="ac_game_settings_acwing">
                        <img width='30' src="../../resources/acwing.png" alt="">
                        <div>
                            AcWing一键登录
                        </div>
                    </div>        
                </div>
            </div>
        `)

        this.$login = this.$settings.find(".ac_game_settings_login")
        this.$login.hide()
        this.$login_username = this.$login.find(".ac_game_settings_username input")
        this.$login_password = this.$login.find(".ac_game_settings_password input")
        this.$login_submit = this.$login.find(".ac_game_settings_submit button")
        this.$login_error_message = this.$login.find(".ac_game_settings_error_message")
        this.$login_register = this.$login.find(".ac_game_settings_option")

        this.$register = this.$settings.find(".ac_game_settings_register")
        this.$register_username = this.$register.find(".ac_game_settings_username input")
        this.$register_password = this.$register.find(".ac_game_settings_password_first_input input")
        this.$register_password_confirm = this.$register.find(".ac_game_settings_password_second_confirm input")
        this.$register_submit = this.$register.find(".ac_game_settings_submit button")
        this.$register_error_message = this.$register.find(".ac_game_settings_error_message")
        this.$register_login = this.$register.find(".ac_game_settings_option")
        this.$register.hide()

        this.root.$my_game.append(this.$settings)
        this.start()
    }

    start() {
        this.getinfo()
        this.add_listening_events()
    }

    add_listening_events() {
        this.add_listening_events_login()
        this.add_listening_events_register()
    }

    add_listening_events_login() {
        let outer = this
        this.$register_login.click(function () {
            outer.login()
        })
        this.$login_submit.click(function () {
            outer.login_on_remote()
        })
    }

    add_listening_events_register() {
        let outer = this
        this.$login_register.click(function () {
            outer.register()
        })
        this.$register_submit.click(function () {
            outer.register_on_remote()
        })
    }

    getinfo() {
        let outer = this

        outer.username = sessionStorage.getItem("username") === null ? "" : sessionStorage.getItem("username")
        console.log(outer.username)
        $.ajax({
            url: `http://0.0.0.0:8000/profile/me?mock_login=${outer.username}`,
            type: "GET",
            data: {
                platform: outer.platform
            },
            success: function (resp) {
                console.log(resp)
                if (resp.result === "success") {
                    outer.hide()
                    outer.root.menu.show()
                    outer.username = resp.username
                    outer.photo = resp.photo
                } else {
                    outer.root.menu.hide()
                    outer.login()
                }
            }
        })
    }

    hide() {
        this.$settings.hide()
    }

    show() {
        this.$settings.show()
    }

    // 打开登陆页面
    login() {
        this.$register.hide()
        this.$login.show()
    }

    // 打开注册页面
    register() {
        this.$login.hide()
        this.$register.show()
    }

    login_on_remote() { // 在远程服务器上登陆
        let username = this.$login_username.val()
        let password = this.$login_password.val()
        this.$login_error_message.empty()
        let outer = this
        $.ajax(
            {
                url: `http://0.0.0.0:8000/login`,
                type: "GET",
                data: {
                    username: username,
                    password: password
                },
                success: function (resp) {
                    if (resp.result === "success") {
                        sessionStorage.setItem("username", username)
                        location.reload()
                    } else {
                        outer.$login_error_message.html(resp.result)
                    }
                }
            }
        )
    }

    logout_on_remote() {
        if (this.platform === "ACAPP") {
            return false
        }
        $.ajax(
            {
                url: `http://0.0.0.0:8000/logout`,
                type: "GET",
                success: function (resp) {
                    console.log(resp)
                    if (resp.result === "success") {
                        sessionStorage.removeItem("username")
                        location.reload()
                    }
                }
            },
        )
    }

    register_on_remote() { // 在远程服务器上注册
        let outer = this
        let username = this.$register_username.val()
        let password = this.$register_password.val()
        let password_confirm = this.$register_password_confirm.val()
        $.ajax(
            {
                url: `http://0.0.0.0:8000/register`,
                type: "GET",
                data: {
                    username: username,
                    password: password,
                    password_confirm: password_confirm
                },
                success: function (resp) {
                    console.log(resp)
                    if (resp.result === "success") {
                        sessionStorage.setItem("username", username)
                        location.reload()
                    } else {
                        outer.$register_error_message.html(resp.result)
                    }
                }
            }
        )
    }
}